<template>
  <div class="law_page">
    <Menus title="法律法规">
      <a @click="goback"
         href="javascript:void(0)"
         v-if="step>1">
        <div class="img_block">
          <img class="img_margin"
               src="static/img/icon_fanhui.png"
               alt="返回">
        </div>
        <span>返回</span>
      </a>
      <router-link to="/"
                   v-if="step>1">
        <div class="img_block">
          <img class="img_margin"
               src="static/img/icon_fanhuishouye.png"
               alt="返回首页">
        </div>
        <span>返回首页</span>
      </router-link>
    </Menus>
    <div class="main">
      <div class="c1"
           v-if="step==1">
        <div class="wrap">
          <div class="search">
            <div class="md">
              <input type="text"
                     class="form-control input-lg"
                     v-model="law_search_content"
                     placeholder="请输入需要查询的法规关键字"
                     @keyup.enter="getSearchResult">
            </div>
            <div class="rt">
              <button type="button"
                      class="btn btn-warning"
                      @click="getSearchResult">搜索</button>
            </div>
          </div>
        </div>
      </div>
      <transition name="animate-slide">
        <div class="c4"
             v-if="step==1 && is_search_result">
          <div class="wrap">
            <div class="ht">
              {{ search_list.length ? '共有'+search_list.length+'条': '没有'}}搜索结果
            </div>
            <div class="content"
                 v-if="search_list.length">
              <LawList :list="search_list"
                       :noTitle="false" />
            </div>
          </div>
        </div>
      </transition>
      <div class="c2"
           v-if="step==1">
        <div class="ht">法律法规库</div>
        <ul>
          <li v-for="(item, index) in law_sort"
              :key="'key-law-sort-'+index"
              @click="getSortList(item.id, item.content)">
            <a href="javascript:void(0)">{{item.content}}</a>
          </li>
        </ul>
      </div>

    </div>

    <div class="law-list-main"
         v-if="step==2">
      <div class="c3">
        <div class="wrap">
          <div class="ht">
            {{law_title}}
          </div>
          <ul>
            <li v-for="(item,index) in list"
                :key="'key-list-'+index"
                @click="getLawDetail(item.id)"
                v-if="!item.parent_title">
              <a href="javascript:void(0)">{{item.content}}</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="law-detail-main"
         v-if="step==3">
      <div class="c4">
        <div class="ht">
          {{law_detail.length ? law_detail[0].parent_title : ''}}
        </div>
        <div class="wrap">
          <div class="content">
            <LawList :list="law_detail"
                     :noTitle="true" />
          </div>
        </div>
      </div>
    </div>
    <a style="padding:10px; display:inline-block"
       href="http://lvpin6.lvpin100.com/g/laotie?device_type=terminal">1</a>
    <a style="padding:10px; display:inline-block"
       href="https://yn.12348.laway.cn/case/data_add1/5a5eb4c2cf339878284c6180?device_type=terminal">2</a>
  </div>
</template>
<script>
import Menus from '@/components/Menu'
import LawList from '@/components/LawList'
import advisory from '@/datas/advisory'
import api from '@/datas/api'
export default {
  data () {
    return {
      list: [],
      step: 1,
      law_sort_select: '',
      law_search_content: '',
      law_sort: [],
      law_title: '',
      law_detail: [],
      search_list: [],
      is_search_detail: false,
      is_search_result: false,
      scroll_top: 0,
      alert: {
        // 提示内容
        show: false,
        info: '请先选择类别',
        recall: () => { }
      }
    }
  },
  computed: {
    law_sort_select_name () {
      const s = this.law_sort_select
      if (!s) return
      let name
      this.law_sort.map(v => {
        if (v.id === s) {
          name = v.content
        }
      })
      return name
    }
  },
  methods: {
    goback () {
      if (this.is_search_detail) {
        this.is_search_detail = false
        this.step = 1
        this.$scrollTo(this.scroll_top)
      } else {
        this.step -= 1
        this.$scrollTo()
      }
    },
    getLawDetail (parent_id) {
      // this.law_detail = this.list.filter(item => {
      //   return item.parent_id === parent_id
      // })
      this.request('?parent_id=' + parent_id + '&include_children=1')
        .then(res => {
          this.law_detail = res.items
          this.step = 3
          this.$scrollTo()
        })
        .catch(err => console.log(err))
    },
    async getSearchResult () {
      this.search_list = []
      const content = this.law_search_content.trim()
      if (!content) return
      const query = content
      const { items } = await this.$get(api.lawSearch + query, this)
      for (let i = 0; i < items.length; i++) {
        if (items[i].parent_title) {
          this.search_list.push(items[i])
        }
      }
      console.log(this.search_list.length)
      this.is_search_result = true
      // this.$scrollTo(707)
    },
    getSortList (expert_id, title) {
      this.request('?expert_id=' + expert_id).then(res => {
        this.step = 2
        this.list = res.items
        this.law_title = title
      })
    },
    handleClick (item, index) {
      if (item.link) {
        location.href = item.link
        return
      }
      this.$router.push({ path: `/zixun/${index}` })
    },
    async request (query) {
      const res = await this.$get(api.law + query, this)
      return res
    }
  },

  mounted () {
    this.request('?expert_id=all').then(({ errcode, items }) => {
      if (errcode) return
      this.law_sort = items
    })
    // const a = await get(api.law + '?expert_id=12', this)
    // const a = await get(api.law + '?expert_id=all', this)
    // const a = await get(
    //   'http://lvpin6.lvpin100.com/law/list/?parent_id=2113',
    //   this
    // )
    // console.log(a)
    this.list = advisory.lists
    this.name = advisory.title
  },

  components: {
    Menus,
    LawList
  }
}
</script>
<style lang="scss" scoped>
.animate-slide-enter-active,
.animate-slide-leave-active {
  transition: all 0.3s;
}
.animate-slide-enter,
.animate-slide-leave-active {
  transform: translate(0, -20px);
  opacity: 0;
}
.law_page {
  padding-top: 1.59rem;
  .ht {
    font-size: 0.36rem;
    text-align: center;
  }
  .c1 {
    padding: 0.9rem 0 0.4rem;
    background: #1e6dd5;
    .ht {
      color: #fff;
    }
    .step {
      padding: 0.4rem 0 0.6rem;
      text-align: center;
    }
    .search {
      display: flex;
      .lt {
        position: relative;
        select {
          width: 2.45rem;
          height: 0.84rem;
          opacity: 0;
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          z-index: 10;
        }
        .btn {
          width: 2.45rem;
          height: 0.84rem;
          font-size: 0.28rem;
          border: 0;
          .caret {
            border-width: 0.08rem;
          }
        }
      }
      .md {
        margin: 0 0.25rem 0 0;
        flex: 1;
        input {
          width: 100%;
          height: 0.84rem;
          font-size: 0.28rem;
        }
      }
      .rt {
        padding-bottom: 0.5rem;
        .btn {
          width: 2rem;
          height: 0.84rem;
          font-size: 0.28rem;
        }
      }
    }
  }
  .c2 {
    padding: 0.9rem 0;
    background: #fff;
    ul {
      display: flex;
      width: 12.2rem;
      margin: 0 auto;
      padding: 0.5rem 0 0.2rem;
      list-style: none;
      flex-wrap: wrap;
      li {
        width: 25%;
        a {
          height: 0.64rem;
          line-height: 0.64rem;
          display: block;
          border-radius: 0.04rem;
          font-size: 0.22rem;
          background: #e8f0fb;
          text-align: center;
          color: #333;
          margin: 0 0.1rem 0.2rem;
        }
      }
    }
  }
  .c3 {
    padding: 0.9rem 0;
    background: #ddd;
    ul {
      margin: 0.5rem 0;
      padding: 0;
      list-style: none;
      background-color: #fff;
      border-radius: 0.06rem;
      li {
        font-size: 0.28rem;
        border-bottom: 1px solid #ddd;
        a {
          color: #333;
          display: block;
          padding: 0.3rem 0.45rem;
          &:active {
            background-color: #eee;
          }
        }
      }
    }
  }
  .c4 {
    padding: 0.9rem 0;
    background: #ddd;
    // ul {
    //   list-style: none;
    //   padding: 60px 0 0;
    //   li {
    //     font-size: 24px;
    //     padding: 45px 0;
    //     border-top: 1px solid #eee;
    //   }
    // }
  }
  .wrap {
    width: 12rem;
    margin: 0 auto;
  }

  .main {
    display: block;
  }
}
@media screen and (orientation: portrait) {
  .law_page {
    .wrap {
      width: 100%;
    }
    .c1 {
      padding-bottom: 0.6rem;
      .step {
        padding: 0.4rem 0.4rem 0.6rem;
        img {
          width: 100%;
        }
      }
      .search {
        padding: 0 0.4rem;
        .md {
          flex: 1;
          input {
            width: 100%;
          }
        }
      }
    }
    .c2 {
      ul {
        width: 100%;
        padding: 0.4rem;
        li {
          width: 50%;
        }
      }
    }
    .c3 {
      ul {
        width: 90%;
        margin: 0.5rem auto 0;
        box-shadow: 0.1rem 0.1rem 0.3rem rgba(0, 0, 0, 0.05);
      }
    }
    .c4 {
      .law-list {
        width: 90%;
        margin: 0 auto;
      }
    }
  }
}
@media screen and (orientation: landscape) {
}
</style>
